<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/login.css" />
<script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/**
	 * 判断邮箱是否正确，并将错误信息输出，控制提交按钮能否使用
	 * @param element 输入标签
	 * @returns {Boolean}
	 */
	function checkError(element){
		var error = check($(element).val());
			$($('tr:eq(0) td:eq(1)')).text(error);
		if(error != ""){
			$('input[type=submit]').attr('disabled','true');
			return false;
		}else{
			$('input[type=submit]').removeAttr('disabled');
			return true;
		}
	}
	$(function() {
		if("${errorCount}" > 2){
			$(".hide").removeClass('hide');
		}
		$("input[name=email]").blur(function() {
			checkError(this);
		}).keyup(function(e) {
			var error = check($(this).val());
			$('tr:eq(0) td:eq(1)').text("");
			$('#failLogin').text("");
			if(error == ""){
				$('tr:eq(0) td:eq(1)').text(error);
				$('input[type=submit]').removeAttr('disabled');
			}
			if((e.keyCode < 37) || (e.keyCode >40)){
				//获取要校验的值
				var value1 =  $(this).val();
				//返回的正确的值
				var value2 = checkChar(value1);
				var index = document.getElementById("email").selectionEnd;
				$(this).val(value2);
				//调整文本框中光标的位置
				if(value2.length == value1.length){
					document.getElementById("email").selectionEnd = index
				}else if(value2.length < value1.length){
					document.getElementById("email").selectionEnd = index-1;
				}	
			}
		});
		$("input[name=password]").keyup(function(e) {
			$('tr:eq(1) td:eq(1)').text("");
			$('#failLogin').text("");
		});
		//点击提交按钮 校验密码
		$("input[type=submit]").click(function() {
			var bol = checkError("input[name=email]");
			if(bol){
				if($("input[name=email]").val() == ""){
					$('tr:eq(0) td:eq(1)').text("邮箱不能为空!");
					return false;
				}else if($("input[type=password]").val() == ""){
					$('tr:eq(1) td:eq(1)').text("密码不能为空!");
					return false;
				}else if($("tr:nth-Child(3)").css("display") != "none"){
					if($("input[name=code]").val() == ""){
						$('tr:eq(2) td:eq(2)').text("验证码不能为空!");
						return false;
					}
					return true
				}else{
					return true;
				}
				
			}else{
				return false;			
			}
		});
		//单击验证码切换图片
		$("#img").click(function (){
			var url = "${pageContext.request.contextPath}/userL/check.action?number="+Math.random();  
		    $(this).attr("src",url); 
		});
		$("#img").click();
		
	});
</script>
</head>
<body>
	<div id="loginDiv" class="loginDiv">
		<span id="failLogin">${ErrorInfo}</span>
		<form action="${pageContext.request.contextPath}/userL/login.action" method="post">
			<table border="0" cellspacing="0"  cellpadding="0">
				<tr>
					<td colspan="2"><input type="text" name="email" id="email"
						placeholder="邮箱账号" maxlength="32" autocomplete="off" /></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="2"><input type="password" name="password" id="password"
						placeholder="密码" maxlength="20" /></td>
					<td></td>
				</tr>
				<tr class="hide">
					<td><input type="text" name="code" id="code" placeholder="验证码" maxlength="4" /></td>
					<td><img id="img" src="${pageContext.request.contextPath}/user/check.action" /></td>
					<td id="codeError"></td>
					
				</tr>
				  <tr>
					<td colspan="2"><input type="submit" value="登录" /></td>
					<td></td>
				</tr>
			</table>
			<a href="${pageContext.request.contextPath}/userL/register.action">注册</a>
			<a href="${pageContext.request.contextPath}/userL/fp.action">无法登陆？</a>
		</form>
	</div>
</body>
</html>